<template>
  <div class="yui3-g flex">
    <li 
        class="yui3-u-1-5" 
        v-for="goods in props.list"
        :key="goods.id"
    >
        <div @click="toGoodsInfo(goods.id)">
            <div >
                <a href="javascript:;">
                    <img :src="goods.defaultImg"/>
                </a>
            </div>
            <div class="attr">
                <a href="javascript:;">{{goods.title}}</a>
            </div>
            <div class="price">
                <strong>
                    <em>¥ </em>
                    <i>{{ goods.price }}</i>
                </strong>
            </div>
            
            <div class="commit">
                <i class="command">已有<span>2000</span>人评价</i>
            </div>
        </div>
    </li>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted } from 'vue'
import { goodsListModel } from '@/api/home';
import homeStore from '@/store/home'
import { useRouter } from 'vue-router'
const homeStoreList = homeStore()
const router = useRouter()
const props = defineProps<{
    list: goodsListModel[]
}>()

onMounted(() => {
    window.onscroll= pageScroll;
})

const pageScroll = () => {
		// 获取滚动的距离
		let scrollTop=document.documentElement.scrollTop;
		// 获取滚动的高度（获取整个html的高度）
		let scrollHeight=document.documentElement.scrollHeight;
		// 获取屏幕(浏览器)高度
		let clienHeight=document.documentElement.clientHeight;
		// 滚动的距离 + 屏幕高度 - 内容高度 >= 0 表示滚动到底部了      (下拉加载判断条件)
		if(scrollTop+clienHeight-scrollHeight >=0){
            homeStoreList.getGoodsList()
		    console.log("我到底了");
		}
}
// 跳转到详情页
const toGoodsInfo = (e: number) => {
  router.push(`goods?keyword=${e}`)
  
}
</script>

<style lang="less" scoped>
.yui3-g{
    width: 99%;
        margin: 0 auto;
        // background-color: yellow;
        justify-content:space-between ;
        flex-wrap: wrap;
    .yui3-u-1-5{
        width: 49%;
        height: 275px;
        font-size: 16px;
        img {
            width: 100%;
            height: 60%;
            background-color:yellowgreen;
        }
        .attr {
            a {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
    }
}
</style>